window.addEventListener("load", function () {
	// API分类
	let apiTypeData = [
		{ name: "全部", keyword: "身份证实名", isnew: false },
		{ name: "生活服务", keyword: "银行卡", isnew: false },
		{ name: "金融科技", keyword: "短信", isnew: false },
		{ name: "交通地理", keyword: "天气", isnew: false },
		{ name: "充值缴费", keyword: "短信", isnew: false },
		{ name: "数据智能", keyword: "手机归属地", isnew: false },
		{ name: "企业工商", keyword: "IP", isnew: false },
		{ name: "应用开发", keyword: "手机归属地", isnew: false },
		{ name: "电子商务", keyword: "IP", isnew: false },
		{ name: "吃喝玩乐", keyword: "视频", isnew: false },
		{ name: "文娱视频", keyword: "视频", isnew: false },
		{ name: "免费接口大全", keyword: "短信", isnew: true },
		{ name: "短信", keyword: "身份证实名", isnew: false },
		{ name: "汽车", keyword: "银行卡", isnew: false },
		{ name: "核验", keyword: "银行卡", isnew: false },
		{ name: "最新发布", keyword: "银行卡", isnew: true },
		{ name: "API私有化部署", keyword: "身份证实名", isnew: true },
	];
	// API分类的数据渲染
	let html = "";
	apiTypeData.forEach(function (v, i) {
		if (i === 0) {
			html += `<li class="active" title=${v.keyword}>${v.name}</li>`;
		} else if (v.isnew) {
			html += `<li class="fw-blod" title=${v.keyword}>${v.name}</li>`;
		} else {
			html += `<li title=${v.keyword}>${v.name}</li>`;
		}
	});
	$("#apiTypeList").innerHTML = html;
	// 功能二:实现点击切换激活样式
	// 1获取相应节点
	// 2给li绑定点击事件
	$("#apiTypeList li").forEach(function (v) {
		v.addEventListener("click", function () {
			// 3点击之后先排他,清除其他激活样式
			$("#apiTypeList li").forEach(function (v) {
				v.classList.remove("active");
			});
			// 4.再给当前被点击的对象增加激活样式
			v.classList.add("active");
			// 功能三:点击时切换搜索框的值
			$("#apilist input").value = v.title;
			$("#apilist strong").textContent = v.textContent;
		});
	});
	//API列表区域 模拟服务器返回的数据
	let listDataArr = [
		//第一行
		{
			img: "API_01.jpg",
			name: "2021出行防疫政策指南1",
			price: "免费",
			isSpecial: false,
		},
		{
			img: "API_02.jpg",
			name: "身份证实名认证1",
			price: "￥0.2000/次",
			isSpecial: true,
		},
		{ img: "API_03.jpg", name: "天气预报1", price: "免费", isSpecial: false },
		{
			img: "API_04.jpg",
			name: "银行卡四元素校验1",
			price: "￥0.3360/次",
			isSpecial: true,
		},
		{
			img: "API_05.jpg",
			name: "短信API服务1",
			price: "￥0.0400/次",
			isSpecial: true,
		},

		//第二行
		{
			img: "API_01.jpg",
			name: "2021出行防疫政策指南2",
			price: "免费",
			isSpecial: false,
		},
		{
			img: "API_02.jpg",
			name: "身份证实名认证2",
			price: "￥0.2000/次",
			isSpecial: true,
		},
		{ img: "API_03.jpg", name: "天气预报2", price: "免费", isSpecial: false },
		{
			img: "API_04.jpg",
			name: "银行卡四元素校验2",
			price: "￥0.3360/次",
			isSpecial: true,
		},
		{
			img: "API_05.jpg",
			name: "短信API服务2",
			price: "￥0.0400/次",
			isSpecial: true,
		},
		//第三行
		{
			img: "API_01.jpg",
			name: "2021出行防疫政策指南3",
			price: "免费",
			isSpecial: false,
		},
		{
			img: "API_02.jpg",
			name: "身份证实名认证3",
			price: "￥0.2000/次",
			isSpecial: true,
		},
		{ img: "API_03.jpg", name: "天气预报3", price: "免费", isSpecial: false },
		{
			img: "API_04.jpg",
			name: "银行卡四元素校验3",
			price: "￥0.3360/次",
			isSpecial: true,
		},
		{
			img: "API_05.jpg",
			name: "短信API服务3",
			price: "￥0.0400/次",
			isSpecial: true,
		},
		//第四行
		{
			img: "API_01.jpg",
			name: "2021出行防疫政策指南4",
			price: "免费",
			isSpecial: false,
		},
		{
			img: "API_02.jpg",
			name: "身份证实名认证4",
			price: "￥0.2000/次",
			isSpecial: true,
		},
		{ img: "API_03.jpg", name: "天气预报4", price: "免费", isSpecial: false },
		{
			img: "API_04.jpg",
			name: "银行卡四元素校验4",
			price: "￥0.3360/次",
			isSpecial: true,
		},
		{
			img: "API_05.jpg",
			name: "短信API服务4",
			price: "￥0.0400/次",
			isSpecial: true,
		},
	];
	// 卡片区动态渲染
	//  1.获取相应的节点 $("#listDataArr")
	// 2.遍历listDataArr 拼接html结构
	let html2 = "";
	listDataArr.forEach(function (v) {
		html2 += `
            <li class="rel">
                <img src="../imgs/${v.img}" alt="图片加载失败">
                <p>${v.name}</p>
                <p class=${v.isSpecial ? "fc-red" : "fc-green"}>${v.price}</p>
                ${v.isSpecial ? '<span class="abs">企业认证</span>' : ""}
                <a class="abs" href="#">申请数据</a>
            </li>`;
	});
	// 将html结构放入指定位置
	$("#listDataArr").innerHTML = html2;
	// 分页部分的点击切换激活样式
	// 1.获取相应节点
	$("#paging a").forEach(function (v) {
		// 2.遍历节点给每个a标签绑定点击事件
		$("#paging a")[0].classList.add("active");
		v.addEventListener("click", function () {
			// 3.点击之后排他,所有的a标签的激活状态清除
			$("#paging a").forEach(function (v) {
				v.classList.remove("active");
			});
			// 4.再给自己添加激活样式
			v.classList.add("active");

			// 功能6:点击分页器实现卡片区的分页
			console.log(Number(v.textContent))
			// 调用封装的函数
			render(Number(v.textContent),5,listDataArr)
		});
	});
	// 功能6:点击分液器实现卡片区的分页,封装一个渲染函数
	console.log("第一页",listDataArr.slice(0,5));
	// 复用封函数,渲染函数
	// 1.实现基本功能
	// 2.确定函数名--render
	// 3.确定函数参数--当前页码pagination,每页条数pageSize, arr
	// 当前页码 , 每页条数, 原数据
	// 公式:(当前页码 - 1)*每页条数
	// (1 - 1)*5
	// (2 - 1)*5
	// 4.确定函数返回值--不需要
	// 5.将功能代码放入函数壳子,替换对应变量
	function render(pagination,pageSize,arr){
		// 思路:先对数据进行处理然后执行渲染
		// 技巧:数据处理和渲染要分开考虑
		// 对数组进行处理
		// 求开始索引(当前页码 - 1)*每页条数
		let startIndex = (pagination - 1)*pageSize;
		const result = arr.slice(startIndex,startIndex + pageSize);
		// 1.获取后台数据,进行遍历
		let cardsHtml = ""
		result.forEach(function(v){
			// 2.遍历时拼接为HTML结构
			cardsHtml +=`
			<li class="rel">
                <img src="../imgs/${v.img}" alt="图片加载失败">
                <p>${v.name}</p>
                <p class=${v.isSpecial ? "fc-red" : "fc-green"}>${v.price}</p>
                ${v.isSpecial ? '<span class="abs">企业认证</span>' : ""}
                <a class="abs" href="#">申请数据</a>
            </li>
			`;
		});
		// 3.将HTML结构放入指定位置
		$("#listDataArr").innerHTML = cardsHtml;
	}
//6.调用测试(默认第一页)
render(1,5,listDataArr)
//

	// 申请数据 登录模态框
	//点击申请数据模态框出现
	//1.获取相应的节点 模态框 $("#mask") 列表 $("#listDataArr")
	// 2.给$("listDataArr")绑定点击事件
	// 3.利用target 检查事件源 当localName 为a时模态框出现
	$("#listDataArr").addEventListener("click", function (e) {
		if (e.target.localName === "a") {
			$("#mask").style.display = "block";
			$("html").style.overflow = "hidden";
			e.preventDefault();
		}
	});
	//4. 点击模态框,模态框消失
	$("#mask").addEventListener("click", function (e) {
		this.style.display = "none";
		$("html").style.overflow = "auto";
	});
	// 5.阻止登录框的事件传播
	$("#loginModal").addEventListener("click", function (e) {
		e.stopPropagation();
	});

	// 功能二:点击模态框中的tab按钮,对应按钮要激活,显示对应的form表单
	$("#loginForm div")[0].style.display = "block";
	// 1.获取相应节点$("#loginModalTab a")
	// 2.给tab的按钮绑定点击事件
	$("#loginModalTab a").forEach(function (v, i) {
		v.addEventListener("click", function () {
			// 3.先排他,移除所有a标签的激活样式
			$("#loginModalTab a").forEach(function (item, i) {
				item.classList.remove("active");
				// 3.先排他,移除所有from标签的显示样式
				$("#loginForm div")[i].style.display = "none";
			});
			// 4.再给当前点击的a标签增加激活样式
			this.classList.add("active");
			// 4.显示对应的form表单
			$("#loginForm div")[i].style.display = "block";
		});
	});
});
